<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>修改用户角色</title>
    <!-- 引用统一的CSS，保持系统风格一致 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/userRoles.css">
</head>
<body>
<div class="container mt-5">
    <h3>修改用户角色</h3>

    <!-- 处理用户不存在的情况 -->
    <c:if test="${user == null}">
        <div class="alert alert-danger">未找到指定用户，请检查用户ID是否正确</div>
        <a href="${pageContext.request.contextPath}/user/list" class="btn btn-secondary">返回用户列表</a>
    </c:if>

    <!-- 用户存在时展示角色修改表单 -->
    <c:if test="${user != null}">
        <!-- 用户基本信息展示区 -->
        <div class="user-info card p-3 mb-4">
            <h5>用户信息</h5>
            <table class="table table-borderless">
                <tr>
                    <td width="20%">用户ID：</td>
                    <td>${user.id}</td>
                </tr>
                <tr>
                    <td>用户名：</td>
                    <td>${user.loginname}</td>
                </tr>
                <tr>
                    <td>姓名：</td>
                    <td>${user.name}</td>
                </tr>
            </table>
        </div>

        <!-- 角色选择表单：提交到/saveRoles（对应UserServlet的saveUserRoles方法） -->
        <form method="post" action="${pageContext.request.contextPath}/user/saveRoles">
            <!-- 隐藏域：传递用户ID（后台需要用它定位用户） -->
            <input type="hidden" name="userId" value="${user.id}">

            <!-- 角色列表区域 -->
            <div class="roles-section">
                <h4>系统角色列表</h4>

                <!-- 系统无角色时的提示 -->
                <c:if test="${empty allRoles}">
                    <div class="alert alert-info">系统中暂无角色，请先创建角色后再分配</div>
                </c:if>

                <!-- 遍历所有角色，生成复选框 -->
                <c:if test="${not empty allRoles}">
                    <div class="roles-list">
                        <c:forEach var="role" items="${allRoles}">
                            <div class="form-check">
                                <!-- 复选框：name为roleIds（后台用getParameterValues接收数组） -->
                                <input type="checkbox"
                                       class="form-check-input"
                                       name="roleIds"
                                       value="${role.id}">
                                <!-- 判断当前角色是否在用户已有的角色中，是则勾选 -->
                                <c:forEach var="userRole" items="${userRoles}">
                                    <c:if test="${userRole.id == role.id}">checked</c:if>
                                </c:forEach>
                                >
                                <label class="form-check-label">
                                        ${role.name}
                                    <span class="text-muted">(${role.description != null ? role.description : '无描述'})</span>
                                </label>
                            </div>
                        </c:forEach>
                    </div>
                </c:if>
            </div>

            <!-- 操作按钮区 -->
            <div class="mt-4">
                <button type="submit" class="btn btn-primary"
                        <c:if test="${empty allRoles}">disabled</c:if>>
                    保存角色设置
                </button>
                <a href="${pageContext.request.contextPath}/user/list" class="btn btn-secondary ml-2">返回用户列表</a>
            </div>
        </form>
    </c:if>
</div>
</body>
</html>
